<template>
    <div class="photoinfo-container">
        <h3 class="title">标题{{photoInfo.title}}</h3>
        <p class="subtitle">
            <span>发表时间：{{photoInfo.add_time | dataFormat}}</span>
            <span>点击：{{photoInfo.click}}次</span>
        </p>
        <hr>
        <!--缩小图-->
        <div class="thumbs">
        <!--<img class="preview-img" v-for="(item, index) in list" :src="item.src" height="100" :key="item.src" @click="$preview.open(index, list)" >-->
            <vue-preview :slides="list" height="100"></vue-preview>
        </div>
        <!--内容-->
        <div class="content">{{photoInfo.content}}</div>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <commentBox :id="id"></commentBox>
    </div>
</template>

<script>
import comment from '../comment/comment.vue';
export default {
    data(){
        return {
            id:this.$route.params.id,
            photoInfo:{},
            list:[],
        }
    },
    created(){
        this.getPhotoInfo();
        this.getImageSrc();
    },
    methods:{
        getPhotoInfo(){
            this.$http.get('http://127.0.0.1:3001/getnewinfo?id='+this.id).then((result)=>{
                if(result.body.code === '0'){
                    this.photoInfo = result.body.newsinfo;
                    //console.log(result.body.newsinfo);
                }else{
                    Toast('网络抽风了');
                }
            }).catch(function (err) {
                console.log(err);
            })
        },
        getImageSrc(){
            this.$http.get('http://127.0.0.1:3001/getImageSrc?id='+this.id).then((result)=>{
                if(result.body.code === '0'){
                    var obj1 =  {
                        src:result.body.imageInfo.src1,
                        msrc:result.body.imageInfo.src1,
                        alt:'111',
                        title:'111',
                        w: 300,
                        h: 200
                    };
                    var obj2 =  {
                        src:result.body.imageInfo.src2,
                        msrc:result.body.imageInfo.src2,
                        alt:'111',
                        title:'111',
                        w: 300,
                        h: 200
                    }
                    var obj3 =  {
                        src:result.body.imageInfo.src3,
                        msrc:result.body.imageInfo.src3,
                        alt:'111',
                        title:'111',
                        w: 300,
                        h: 200
                    }
                    var obj4 =  {
                        src:result.body.imageInfo.src4,
                        msrc:result.body.imageInfo.src4,
                        alt:'111',
                        title:'111',
                        w: 300,
                        h: 200
                    }
                    var obj5 =  {
                        src:result.body.imageInfo.src5,
                        msrc:result.body.imageInfo.src5,
                        alt:'111',
                        title:'111',
                        w: 300,
                        h: 200
                    }
                    this.list.push(obj1);
                    this.list.push(obj2);
                    this.list.push(obj3);
                    this.list.push(obj4);
                    this.list.push(obj5);
                }else{
                    Toast('网络抽风了');
                }
            }).catch(function (err) {
                console.log(err);
            })
        }
    },
    components:{
        'commentBox':comment
    }
}
</script>

<style scoped lang="less">
    .photoinfo-container{
        padding: 0 8px;
        .title{
            font-size: 16px;
            text-align: center;
            margin: 15px 0;
        }
        .subtitle{
            font-size: 13px;
            color: #226aff;
            display: flex;
            justify-content: space-between;
        }
        .thumbs{
            /*img{
                padding: 5px;
                box-shadow: 0 0 8px #999;
                width: 200px!important;
                height: 200px!important;
            }*/
            .my-gallery{
                figure{
                    a{
                        img{
                            width: 100px !important;
                            height: 100px !important;
                        }
                    }
                }
            }
        }
    }

</style>